<?php
      $totalcount = count($ITEMSECTIONLIST);
      ?>
          <script type="text/javascript">
			var isHover = false;
			var hoverElement = null;
			var start = false;
			var color = null;
			var mapId = null;
			$(document).ready(function(){
				$('.click').each(function() {
					$(this).click( function(event) {
		
							color = $(this).css('background-color');
							
							start = true;
							//alert("clicked " + color);
						}
					);
				});
		
				initializeSVG();
			});
		
		
			function initializeSVG() {
				$('.imagemap').each(function(){
					createSVG($(this).attr('id'), $(this).attr('coords') , $(this).attr('alt'));
		            
					/*$(this).click(function(){
						if(start) {
							document.getElementById('svg'+this.id).style.fill = color;
							section = $(this).attr('title');
							$('.section_class_' + section).each(function(){
									document.getElementById('svg'+this.id).style.fill = color;
							});
						}
					});*/
				});
			}
		
			function createSVG(id, coords , viewid) {
				var array = coords.split(',');
		
				var path = '';
		
				for(var i=0; i< array.length; i+=2) {
					var x = array[i];
					var y = array[i+1];
		
					path += x+','+y+' ';
		
					
				}
		
				path += array[0]+','+array[1]+' ';
		
				var polygon = svgEl('polygon')
				$(polygon).attr('points', path);
				$(polygon).attr('id', 'svg'+id);
				$(polygon).attr('style', 'fill:rgb(255,255,255);stroke-width:0');
		
				$('#svg_' + viewid).append(polygon);
		
				
			}
		
			function svgEl(tagName) {
				return document.createElementNS("http://www.w3.org/2000/svg", tagName);
			}
		
		</script>
    
      <script type="text/javascript">
   		var CURRENTVIEWID = 0;
   		var CURRENTVIEWDIVCONTAINERID = 0;
   		var HIGHESTSTEPREACHED = 1;

    	var CURRENTITEMVIEWCONTAINER = <?=$FIRSTVIEWID?>;

   		
   		function loadview(el , counter , sectionParentView){
   			previousDivid = "#div_item_section_color_container_" + CURRENTVIEWDIVCONTAINERID;
			currentDivId = "#div_item_section_color_container_" +  counter;
			if(typeof currentDivId != 'undefined' ){
		   		$(previousDivid).hide();
				$(currentDivId).show();
				var ctr = 0;
				loadSectionParentView(sectionParentView);
				CURRENTVIEWDIVCONTAINERID = counter;
				if(CURRENTVIEWDIVCONTAINERID >= HIGHESTSTEPREACHED){
					HIGHESTSTEPREACHED = CURRENTVIEWDIVCONTAINERID;
					for(i = 1; i <= HIGHESTSTEPREACHED; i++){
						$("#steps_" + i).addClass("active");
					}
				}
				
			}else{
	   			alert("ELSE");
			}
   		}

   		function loadSectionParentView(sectionParentView){
				<?php  foreach($ITEMVIEW as $view){ ?>
					if("<?=$view['name']?>" == sectionParentView){
						loaditemviewcontainer(null,<?=$view['id']?>);
					}
				<?php } ?>
   		}

   		function loaditemviewcontainer(el , counter ){
   	   	//	alert(CURRENTITEMVIEWCONTAINER+"               "+counter);
   			previousDivid = "#div_image_view_" + CURRENTITEMVIEWCONTAINER;
			currentDivId = "#div_image_view_" +  counter;
			if(typeof currentDivId != 'undefined' ){
		   		$(previousDivid).hide();
				$(currentDivId).show();
				CURRENTITEMVIEWCONTAINER = counter;
			}else{
	   			alert("ELSE");
			}
   		}

   		function setSelectedColor( section , color , colorcounter, totalcolorcountinsection, colorvalue){
   			var cl = $("[id^='active_section_color_" + section + "_"  + color + "_']" ).css("display");
   			$("[id^='active_section_color_" + section + "_']").hide();
			if(cl == "block"){
				$("[id^='active_section_color_" + section + "_"  + color + "_']" ).hide();
				$("[name=item_section_color_"+section+"]").val("");
			}else{
   				$("[id^='active_section_color_" + section + "_"  + color + "_']" ).show();
   				$("[name=item_section_color_"+section+"]").val(color);
			}
			//setSelectedColo
			//alert();
			$('.section_class_' + section).each(function(){
					document.getElementById('svg'+this.id).style.fill = colorvalue;
			});
			coordinates(section);
   		}

   		function coordinates(section){
   			<?php /* forEach($ITEMSECTIONLIST as $itemsection){
   					$sectionCoordinatesVar = "ITEMSECTIONCOORDINATES_".$itemsection['id'];
   					$sectionCoordinatesList = (isset($$sectionCoordinatesVar))? $$sectionCoordinatesVar : array();
   					$tab = "\t\t\t";
   					echo "$tab if(section == ".$itemsection['id']."){\n";
   					echo "$tab str = '';\n";
	   					foreach($sectionCoordinatesList as $sectionCoordnates){
	   							//coordinates
	   						echo "$tab str= str + '" . $sectionCoordnates['coordinates'] ."';\n";
	   					}
   					echo "$tab }\n";//if
   					
   			}*/
   			?>
   			//alert(str);
   		}
  	 </script>